/*
 * @Description:支付组件
 * @Author: ziwei.ma
 * @Date: 2019-07-25 09:47:07
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-08-28 16:08:05
 */
<template>
  <shade
    ref="shade"
    @hide="hide"
  >
    <transition name="fade">
      <div
        class="payment-wrapper"
        v-if="isShow"
        @click.stop
      >
        <!-- 标题 -->
        <div class="title-wrapper flex-h flex-vc">
          <span
            class="icon iconfont icon-cancel cancel"
            @click="clickCancel"
          ></span>
          <span class="fontsize40 title">确认支付</span>
        </div>
        <!-- 价格 -->
        <div class="price-wrapper flex-h flex-hc flex-vc">
          <span class="fontsize32">¥</span>
          <span class="fontsize40">{{depositAmount}}</span>
        </div>
        <!-- 支付方式 -->
        <div class="peyment-box">
          <div
            class="payment flex-h flex-vc"
            v-for="(option,index) in paymentList"
            :key="index"
            @click="changedPayment(index)"
          >
            <div class="payment-img flex1 flex-h flex-vc">
              <img :src="option.paymentIcon">
              <span class="fontsize32">{{option.paymentName}}</span>
            </div>
            <img
              class="selected"
              :src="[index === selectedFstPay ? selected : unselect ]"
            >
          </div>
        </div>
        <!-- 付款按钮 -->
        <div
          class="pay-btn fontsize30"
          @click="placeOrder()"
        >立即付款</div>
      </div>
    </transition>
  </shade>
</template>

<script>
import Shade from '../components/Shade'
import { browser } from 'vue-xiaobu-utils'
import { PayMentModel } from './PayMentModel'
export default {
  components: {
    'shade': Shade
  },
  data() {
    return {
      isShow: false,
      paymentList: [],
      selectedFstPay: 0, // 选中的支付方式是否为第一个
      unselect: require('./assets/unselect.png'), // 未选中样式图片
      selected: require('./assets/selected.png')// 选中后样式图片
    }
  },
  props: {
    depositAmount: ''
  },
  methods: {
    // 显示组件 传入boolean参数即可  type:1 延迟隐藏遮罩
    show() {
      this.$emit('isHidden', true)
      this.$refs.shade.show()
      // 不延迟没有动画效果
      setTimeout(() => {
        this.isShow = true
      }, 1)
    },
    hide() {
      this.$emit('isHidden', false)
      this.isShow = false
      setTimeout(() => {
        this.$refs.shade.hide()
      }, 500)
    },
    // 点击关闭按钮
    clickCancel() {
      this.hide()
    },
    // 选中的支付方式
    changedPayment(index) {
      this.selectedFstPay = index
    },
    // 点击立即支付并发送支付方式给父组件
    placeOrder() {
      this.$emit('placeOrder', this.paymentList[this.selectedFstPay].paymentType)
      console.log(this.paymentList[this.selectedFstPay].paymentType)
    }
  },
  mounted() {
    // 判断是否从移动设备打开
    if (browser && browser.versions && browser.versions.mobile) {
      var ua = window.navigator.userAgent.toLowerCase() // 获取判断用的对象
      if (ua.match(/MicroMessenger/i) === 'micromessenger') {
        // 判断是否为微信浏览器内页面
        this.payMode = 'WXJSPAY'
        this.supportPayModes = ['WXJSPAY']
      }
    }
    window.getAllSupportPaymentList(1, 6, arrstr => {
      arrstr.forEach(item => {
        this.paymentList.push(new PayMentModel(item.TYPE, item.ICON_URL, item.NAME))
      })
      this.changedPayment(0)
    }, err => {
      console.dir(err)
    })
  }
}
</script>

<style scoped>
.payment-wrapper {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 920px;
  transition: max-height 1s;
  border-radius: 20px 20px 0px 0px;
  background-color: #fff;
  z-index: 999;
  overflow: hidden;
}
.title-wrapper {
  height: 112px;
  line-height: 112px;
  padding: 0 32px;
  border-bottom: 1px solid #eeeeee; /*no*/
}
.cancel {
  display: inline-block;
  color: #cccccc;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 42px;
}
.title {
  margin-left: 216px;
  font-weight: 400;
}
/* 价格 */
.price-wrapper {
  height: 115px;
  font-weight: 500;
}
/* 支付方式 */
.peyment-box {
  height: 464px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.payment {
  height: 111px;
  overflow: hidden;
  margin: 0 32px;
  border-bottom: 1px solid #eeeeee;
}
.payment-img > img {
  width: 48px;
  height: 48px;
  margin-right: 32px;
}
.selected {
  width: 48px;
  height: 48px;
}
/* 付款按钮 */
.pay-btn {
  width: 686px;
  height: 72px;
  line-height: 72px;
  text-align: center;
  background: linear-gradient(
    90deg,
    rgba(39, 132, 255, 1) 0%,
    rgba(78, 129, 250, 1) 100%
  );
  border-radius: 36px;
  color: #fff;
  margin: 78px 32px 78px;
}
/* 弹窗动画 */
.fade-enter-active,
.fade-leave-active {
  transition: height 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  height: 0;
}
</style>
